<template>
    <img src="../assets/bg4.jpg" alt="" class="login-bg">
    <div class="loginTop">
        <div class="logining">欢迎登录</div>
        <img src="" alt="" class="loginMiddle">
    </div>
    <div class="loginContent">
        <input type="text" placeholder="手机号/邮箱" class="inputTop" v-model="phone">
        <input type="password" placeholder="密码" class="inputBottom" v-model="password"> 
        <button class="submit" >
            <div class="iconfont submit-icon">&#xe8ab;</div>
            <div class="submit-click"  @click="register">点击登录</div>
        </button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            password: ''
        }
    },
    methods: {
        Login:async function () {
            let res = await this.$store.dispatch('getLogin', { phone: this.phone, password: this.password });
            console.log(res)
            if (res.code === 200) {
                this.$router
            }
        },
        register: function () {
            this.$router.replace('/')
        }
    }
}
</script>

<style lang="less" scoped>
.login-bg{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 90%;
    z-index:-1;
    opacity: .8rem;
    // filter:blur(4px);
}
.loginTop{
    width: 100%;
    height: 4rem;
    .logining{
        padding: .5rem;
        width: 100%;
        text-align: center;
        font-size: .3rem;
        color: #fff;
    }
    .loginMiddle{
        position: absolute;
        top: 2rem;
        left: 3rem;
        width: 1.4rem;
        height: 1.4rem;
    }
}
.loginContent{
    display: flex;
    flex-direction: column;
    width: 100%;
    .inputTop{
        width: 60%;
        height: .8rem;
        margin: .8rem .1rem .4rem 1.5rem;
        border-radius: 5px;
        padding: 15px 20px;
        border: 1px solid #fff;
        box-shadow: 0px 0px 15px #fff;
    }
    .inputBottom{
        width: 60%;
        height: .8rem;
        margin: .4rem 1.5rem;
        border-radius: 5px;
        padding: 15px 20px;
        border: 1px solid #fff;
        box-shadow: 0px 0px 15px #fff;
    }
    button{
        display: flex;
        width: 60%;
        height: .8rem;
        margin: .4rem 1.5rem;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #fff;
        box-shadow: 0px 0px 15px #fff;
        .submit-icon{
            margin-left: .2rem;
            font-size: .4rem;
            color: pink;
        }
        .submit-click{
            margin-left: .2rem;
            font-size: .3rem;
            color: #808080;
        }
    }
}

</style>